<template>
     <van-nav-bar title="商品详情" left-text="返回" left-arrow   @click-left="onClickLeft"/>
      <!--  activeId右侧选中项的 id -->
     <van-tree-select
      v-model:active-id=" rightactiveId"  
      v-model:main-active-index="leftactiveIndex"
      :items="categoryData"
    >
    <template #content>
    <van-grid :column-num="3" icon-size="50px">
      <van-grid-item v-for="item in categoryData[leftactiveIndex]?.children" 
      :key="item.id" 
      :icon="item.img.split(',')[0]" 
      :text="item.text" />
    </van-grid>


    </template>


</van-tree-select>





</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { CategoryApi } from '@/api';
const rightactiveId = ref(1);
const leftactiveIndex = ref(0);
const categoryData=ref([])
onMounted(() => { 
   callCateGoryApi()
})

const callCateGoryApi = () => { 

    CategoryApi.select.call().then((res: any) => { 
        console.log(res);
        
        res.forEach((item: any) => {
            item.text = item.name
        })
        const categoryData2 = res.reduce((newArray: any, currValue: any) => {
            currValue.children = res.filter(
                (item:any) => { return item.parentId === currValue.id }
            )
            if (currValue.parentId === 0) {
                newArray.push(currValue)
            }
            return newArray
        }, [])
        categoryData.value = categoryData2
    })

}


const onClickLeft = () => history.back();
</script>
<style scoped>


</style>